


import React, { Component } from 'react';
import PropTypes from 'prop-types';

import {HashRouter as Hash ,BrowserRouter as History  , Routes , Route, Navigate, Outlet  } from 'react-router-dom'
import { styles } from '../utils/common';
// HashRouter  hash模式路由 # 
// BrowserRouter  history 模式路由 不带 # 

// React 路由全部以组件的形式去呈现 
// react-router-dom v6 倾情于 纯函数组件  
// 路由核心 单页面应用  匹配成功对应的Path 加载对应的组件到对应的视图内 

// 1. 路由基本配置流程
// 2. 路由嵌套  Route 双标签  Outlet 
// 3. 路由传参   query params 

// V6 倾向于 纯函数组件
// HashRouter   Hash 
// BrowserRouter  History 
// Routes 匹配优先加载成功的路由    承担了router-view 
// Route  接受组件的视图  负责匹配组件  定义 path 和 component 的关系
// element 接受路由对应的组件  
// Navigate 路由重定向 
// Outlet  router-view 接受子路由  加载子路由的视图 
// Link 导航  a标签 
// NavLink  导航  有高亮的class 样式 
// useLocation 获取 location 对象 
// useSearchParams  获取url 里面的 search 路由查询参数 
// useParams 获取 params 参数  路由参数 
// useNavigate 路由跳转  router.push  
// useRoutes 路由配置 组件化 改造成 编程函数化  addRoutes(vue)

// React 路由懒加载  Suspense ,lazy  


class RouterIndex extends Component {
    render() {
        return (
            <div style={{padding:15}}>
                <h2>React 路由学习 </h2>
                <hr/>
                <AppRouter></AppRouter>
            </div>
        );
    }
}

class AppRouter extends Component{
    render(){
        return (
            <Hash>
                <MyLayout></MyLayout>
            </Hash>
        )
    }
}

class MyLayout extends Component{
    render(){
        return (
            <div style={styles.box}>
                <h2>路由视图 </h2>
                <div style={styles.box}>
                    <Routes>
                        
                        <Route path='/'  element={<AppBox />} >
                            <Route path="/" element={<Navigate to='/home'/> }  />
                            <Route path="/home" element={ <Home/> }  />
                            <Route path="/mine" element={ <Mine/> }  />
                            <Route path="/find" element={ <Find/> }  />
                            <Route path="/set" element={ <SetSome/> }  />
                        </Route>



                        <Route path='/login' element={<Login/> } />
                        <Route path='/reg' element={<Reg/> } />
                        <Route path='/findpass' element={<FindPass /> } />

                        <Route path='/503' element={<BadService/>  }></Route>
                        <Route path='/404' element={<NotFound /> } />

                        <Route path="*" element={ <Navigate  to='/404' />}></Route>
                    </Routes>
                </div>

            </div>
        )
    }
}

class AppBox extends Component{
    render(){
        return (
            <div>
                <h2>AppBox - AppBox - 主视图 - (嵌套路由) </h2>
                <div style={styles.box}>
                    {/* 嵌套路由出口  */}
                    <Outlet></Outlet>
                </div>
            </div>
        )
    }
}

class Home  extends Component{
    render(){
        return (
            <div>
                <h2> Home - Home - 首页  </h2>
            </div>
        )
    }
}

const Mine = ()=>{
    return (
        <div>
            <h2>Mine - Mine - Mine </h2>
        </div>
    )
}

const Find = ()=>{
    return (
        <div>
            <h2>Find - Find - 发现 </h2>
        </div>
    )
}
class SetSome extends Component{
    render(){
        return (
            <div>
                <h2> SetSome - SetSome - 设置信息 </h2>
            </div>
        )
    }
}
class Login extends Component{
    render(){
        return (
            <div>
                <h2> Login - Login - 登录 </h2>
            </div>
        )
    }
}
class Reg extends Component{
    render(){
        return (
            <div>
                <h2> Reg - Reg - 注册 </h2>
            </div>
        )
    }
}

class FindPass extends Component{
    render(){
        return (
            <div>
                <h2> FindPass - FindPass - 找回密码 </h2>
            </div>
        )
    }
}

class NotFound extends Component{
    render(){
        return (
            <div>
                <h2> NotFound - NotFound - 404  </h2>
            </div>
        )
    }
}

const BadService = ()=>{
    return (
        <div>
            <h2> BadService - BadService - 503  </h2>
        </div>
    )
}
export default RouterIndex;
